<template>
  <div class="diaodu">
    <div id="cesiumContainer"></div>
    <div class="searchDiv">
      <div class="jieDiv">
        <el-checkbox-group v-model="selectedOptions" @change="handleSelectionChange">
          <el-checkbox label="0"><img class="imgStyle" src="../../assets/images/hongjian.png" alt=""> <span class="colorSpan">调度未开始</span></el-checkbox>
          <el-checkbox label="1"><img class="imgStyle" src="../../assets/images/chengjian.png" alt=""><span class="colorSpan">调度进行中</span></el-checkbox>
          <el-checkbox label="2"><img class="imgStyle" src="../../assets/images/lvjian.png" alt=""><span class="colorSpan">调度已完成</span></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="waringStyle">
        <span>
          当前任务：
        </span>
        <el-checkbox-group v-model="selectedTasks" @change="handleTaskSelectionChange">
          <el-checkbox label="0"><span class="colorSpan">调度：{{ diaoNum }}</span></el-checkbox>
          <el-checkbox label="1"><span class="colorSpan">巡检：{{ xunNum }}</span></el-checkbox>
        </el-checkbox-group>
      </div>

    </div>
    <div class="rightDiv" >
       <p><span>当前任务：</span><span>{{param.renwuname}}</span></p>
       <p><span>任务原因：</span><span>{{param.renwuyuan}}</span></p>
       <p><span>任务路线：</span><span>{{param.renwulu}}</span></p>
       <p><span>负责人：</span><span>{{param.renwuren}}</span></p>
       <p><span>任务时间：</span><span>{{param.renwudate}}</span></p>
       <p><span>携带耗材：</span><span>{{param.renwuhao}}</span></p>
       <p><span>任务进度：</span><span>{{param.renwujin}}</span></p>
    </div>

  </div>
</template>

<script>
import * as Cesium from 'cesium';
import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
const apiKey =  "AAPK9afd0a76a6aa4b9ab6731982a53d10b2ZIWCKoYT1Lo7dDGOMi5xjcY7TIBkpfvmPkyV7_ZNYpr0b-0JOl4Gencs8EVb2aXy"; // 替换为你的 API 密钥
const cesiumAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZjRjOGQwNy1iODM1LTQzNTEtYTFkZS1lMWQ2NTM3Zjk5ZGMiLCJpZCI6MjA0NDM5LCJpYXQiOjE3MTE0MTYyNjV9.7fi9z31YPkF29lSSrvYpWaGLqoR6FiexnXkACPbP8sc";

export default {
  name: "mapz",
  data() {
    return {
      map:null,
      tdtVecLayer:null,
      tdtImgLayer:null,
      wordLayer:null,
      value:'',
      selectedOptions:[],
      selectedTasks:[],
      diaoNum:'22',
      xunNum:'22',
      param:{
        renwuname:"梁家务村处理站梁家务村处理站",
        renwuyuan:"添加洗涤剂",
        renwulu:"梁家务村处理站",
        renwuren:"郭甜",
        renwudate:"2024-01-01",
        renwuhao:"1243423",
        renwujin:"进行中",
      }
    };
  },
  mounted() {
    this.initMap()

  },
  methods: {
    async initMap(){
      Cesium.Ion.defaultAccessToken = cesiumAccessToken;
      Cesium.ArcGisMapService.defaultAccessToken = apiKey;
      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
      // 创建 Cesium 地球对象
      const viewer = new Cesium.Viewer('cesiumContainer',{
        baseLayerPicker: false, // 不显示图层选择器
        fullscreenButton: false, // 不显示全屏按钮
        homeButton: false, // 不显示返回初始位置按钮
        infoBox: false, // 不显示信息框
        sceneModePicker: false, // 不显示场景模式选择器
        selectionIndicator: false, // 不显示选择指示器
        // terrain: Cesium.Terrain.fromWorldTerrain(),
        timeline: true,
        animation: false,
        geocoder:false,
        baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
      });

      // 将视角定位到指定坐标点
      const destination = Cesium.Cartesian3.fromDegrees(116.3454263,  39.7599227,4000); // 你的目标坐标点
      const heading = Cesium.Math.toRadians(0); // 朝向北方（0度）
      const pitch = Cesium.Math.toRadians(-90); // 俯仰角，根据你的需求调整
      const roll = 0; // 翻滚角，通常设置为0
      viewer.camera.setView({
        destination: destination,
        orientation: {
          heading: heading,
          pitch: pitch,
          roll: roll
        }
      });


      const santaMonicaParcels = Cesium.ArcGisMapServerImageryProvider.fromUrl("https://tiles.arcgis.com/tiles/isEbfhhM3nXXcWNI/arcgis/rest/services/GLmap/MapServer", {
        token:apiKey
      });
      viewer.scene.imageryLayers.add(
        Cesium.ImageryLayer.fromProviderAsync(santaMonicaParcels)
      );


//       const tileset = viewer.scene.primitives.add(
//   await Cesium.Cesium3DTileset.fromIonAssetId(2543564),
// );
// 加载 3D Tileset
const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2543564);
viewer.scene.primitives.add(tileset);

// 设置模型样式
tileset.style = new Cesium.Cesium3DTileStyle({
    color: "color('orange', 0.7)", // 设置模型颜色为X色，并设置透明度为 0.6
    show: "true", // 显示模型
    pointSize: "3.0", // 设置模型点的大小
    // 其他样式属性...
});
 
viewer.scene.globe.enableLighting = true;
viewer.scene.globe.lighting = true;






      // 调用函数添加起点、终点、箭头和曲线
      const twoPoints = [116.3454263, 39.7599227, 116.3464063, 39.7886918];
      const twoPoints1 = [116.3454263, 39.7599227, 116.3664063, 39.7886918];
      const twoPoints2 = [116.3454263, 39.7599227, 116.3654063, 39.7786918];

      this.animatedParabola(twoPoints,viewer)
      this.animatedParabola(twoPoints1,viewer)
      this.animatedParabola(twoPoints2,viewer)
      
    },


    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询信息列表 */
    getList() {

    },
    //搜索下拉选择事件
    handleSelectChange(value) {
      // 处理选择变化的逻辑，这里的 value 参数就是用户选择的值
      console.log('选择的值：', value);
    },
    //弹框点击展示对应table
    handleClick(tab, event) {
      console.log(tab, event);
    },

    //任务选择事件
    handleSelectionChange(selectedTasks) {
      console.log("Selected tasks:", selectedTasks);
      // 在这里可以处理用户选择任务后的逻辑，例如更新数据或向后端发送请求
    },
    //任务选择事件
    handleTaskSelectionChange(selectedTasks) {
      console.log("Selected tasks:", selectedTasks);
      // 在这里可以处理用户选择任务后的逻辑，例如更新数据或向后端发送请求
    },


      // 两点之间抛物线绘制函数，twoPoints是一个数组：[lon1,lat1,lon2,lat2]
    animatedParabola(twoPoints,viewer) {  // 动态抛物线绘制
      const startPoint = [twoPoints[0],twoPoints[1],0]; // 起点的经度、纬度
      const step = 20;  // 自定义线段的数量，越多则越平滑
      const heightProportion = 0.125; // 自定义最高点和总距离的比值(即图中H比上AB的值)，值越大则抛物线越弯曲
      const dLon = (twoPoints[2] - startPoint[0]) / step;  // 经度差值
      const dLat = (twoPoints[3] - startPoint[1]) / step;  // 纬度差值
      const deltaLon = dLon * Math.abs(111000*Math.cos(twoPoints[1]));  // 经度差(米级)
      const deltaLat = dLat * 111000;  // 纬度差(米),1纬度相差约111000米
      const endPoint = [0,0,0];  // 定义一个端点(后面将进行startPoint和endPoint两点画线)
      const heigh = Math.floor(step * Math.sqrt(deltaLon*deltaLon+deltaLat*deltaLat) * heightProportion);
      const x2 = 10000*Math.sqrt(dLon*dLon+dLat*dLat); // 小数点扩大10000倍，提高精确度
      const a = heigh / (x2*x2);  // 抛物线函数中的a
      function y(x, height) {  // 模拟抛物线函数，求高度H
        // 此处模拟的函数为y = H - a*x^2 (H为高度常数)，取整后返回
        return Math.floor(height - a*x*x);
      }
      for(let i = 1;i <= step; i++){  // 逐“帧”画线
        endPoint[0] = startPoint[0] + dLon; // 更新end点纬度
        endPoint[1] = startPoint[1] + dLat; // 更新end点纬度
        const x = x2*(2*i/step-1);  // 求抛物线函数x
        endPoint[2] = y(x,heigh);  // 求end点高度
        viewer.clock.currentTime = Cesium.JulianDate.now(); // 将时钟指针移到当前时间
        // 这里的viewer是容器初始化时new Cesium.Viewer构造的: var viewer = new Cesium.Viewer('mapContainer', {...});
        const IsoTime = Cesium.JulianDate.now(); // 获取当前时间
        viewer.entities.add({  // 添加动态线
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights(startPoint.concat(endPoint)),
            width: 4,
            material: new Cesium.PolylineOutlineMaterialProperty({
              color: Cesium.Color.GOLD,
              outlineWidth: 0.3,
            })
          },
          availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ // 设置显示的时间区间
            start: {
              dayNumber: IsoTime.dayNumber,
              secondsOfDay: IsoTime.secondsOfDay+((i-1)*300),
            },
            stop: {
              dayNumber: IsoTime.dayNumber,
              secondsOfDay: IsoTime.secondsOfDay+(i*300),
            },
          })]),
        });
        viewer.entities.add({  // 添加静态线
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights(startPoint.concat(endPoint)),
            width: 4,
            material: new Cesium.PolylineGlowMaterialProperty({
              color: Cesium.Color.AQUA.withAlpha(0.9),
              outlineWidth: 0.3,
              glowPower : 0.3,
            })
          },
        });
        // end点变为start点
        startPoint[0] = endPoint[0];
        startPoint[1] = endPoint[1];
        startPoint[2] = endPoint[2];
      }
      viewer.clock.shouldAnimate = true;  // 启动时钟开始转动
      viewer.clock.multiplier = 1600;  // 设置时钟转动速度

      
    },
  }
};



</script>

<style scoped lang="scss">
.diaodu{
  position: relative;
  width: 100%;
  height: 100%;
  #cesiumContainer{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
  }
  .searchDiv{
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 13%;
    left: 25%;
    z-index: 9999;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: space-evenly;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    .el-select .el-select-dropdown {
      z-index: 9999; /* 设置一个足够高的值 */
    }
    .jieDiv{
      background-color: #004377;
      padding: 0.5rem 1rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      border-radius: 0.3rem;
      .colorSpan{
        color: white;
      }
      :deep(.el-checkbox__label){
        position: relative;
        .imgStyle{
          position: absolute;
          top: -0.1rem;
        }
        span{
          margin-left: 2.5rem;
        }
      }

    }
    .waringStyle{
      background-color: #004377;
      padding: 0.5rem 1rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      border-radius: 0.3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        margin-left: 0.5rem;
        color: white;
        cursor: pointer;
      }
      span:nth-of-type(2){
        color: #E6307B;
      }
      span:nth-of-type(3){
        color: #ED6942;
      }
      span:nth-of-type(4){
        color: #00FEB5;
      }
    }

  }

  .rightDiv{
    position: absolute;
    top: 11%;
    right: 0;
    width:20rem;
    height: 48rem;
    padding: 2rem 3rem;
    color: white;
    background-image: url("../../assets/images/rightD.png");
    background-size: contain;
    background-repeat: no-repeat; /* 不重复平铺 */
    background-position: center; /* 图片居中对齐 */
    z-index: 999;
    p{
      font-family: PingFangSC, PingFang SC;
      color: #FFFFFF;
      span:nth-of-type(1){
        font-size: 1.2rem;
        font-weight: 500;
      }
      span:nth-of-type(2){
        font-size: 1rem;
        font-weight: 400;
      }
    }

  }


}


</style>

